<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //可迭代对象，迭代协议
        /*
        1.可迭代协议： 增加方法 [Symbol.iterator] () {}
        返回符合 迭代协议 的对象
        2.迭代协议： 有一个 next() 方法的对象，返回
       已结束 { done: true}
       继续迭代 {value: xxx, done: false}
        */
        const obj = {
            //Symbol.iterator 内置的常量
            //[属性名 表达式 ]

            //-----------第一种 generator---------------
            // [Symbol.iterator]() {
            //     function* FoodGenerator() {
            //         yield '苹果'
            //         yield '香蕉'
            //         yield '橘子'
            //     }
            //     const food = FoodGenerator()
            //     return food
            // }
            //-----------第二  自己实现iterator---------------
            [Symbol.iterator]() {
                let index = 0
                const arr = ['苹果', '香蕉', '橘子']
                return {
                    next() {
                        if (index < arr.length) {
                            return {
                                value: arr[index++],//取完值后，index自增
                                done: false
                            }
                        } else {
                            return {
                                done: true
                            }
                        }
                    }
                }
            }
        }
        for (const k of obj) {
            console.log(k)
        }
        // 执行过程：
        // 1. for...of 检查 obj 是否有 [Symbol.iterator] 方法
        // 2. 调用 obj[Symbol.iterator]() 获取迭代器对象
        // 3. 反复调用迭代器的 next() 方法
        // 4. next() 返回 { value: '苹果', done: false } 等
        // 5. for...of 把 value 赋值给 k
        // 6. 执行循环体内的代码

        // 第二种 自己实现
    </script>
</body>

</html>